<template>
  <div class="container" style="overflow:scroll;padding-top:50px"><table border="1" cellspacing="0">
            <tr>
                <th>分公司名称</th>
                <th>成果分类</th>
                <th>成果等级</th>
                <th>计划数量</th>
                <th>审核通过数量</th>
                <th>工作完成率</th>
                <th>获得成果数量</th>
                <th>成果获得率</th>
            </tr>

            <tr v-for="(item,itemIndex) in mydata" :key="itemIndex">
                <td v-if="item.orgName" :rowspan="item.rowspan1">
                    {{item.orgName}}
                </td>
                <td v-if="item.typeName" :rowspan="item.rowspan2">
                    {{item.typeName}}
                </td>

                <td>{{item.levelName}}</td>
                <td>{{item.planNum}}</td>
                <td>{{item.completeCount}}</td>
                <td>{{item.getArchiveRate}}</td>
                <td>{{item.getNum}}</td>
                <td>{{item.completeRate}}</td>
            </tr>
        </table>
  </div>
</template>
<script>
import {data} from '../../plots/dataList'
export default {
  name:'a'+ Date.now(),
  props: {
    title: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    bordered: {
      type: Boolean,
      default: false
    }
  },
  data () {
    this.data = data
    return {
      mydata: [],
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () { 
      let data2 = data.data.total
                data2 = data2.map(item => {
                    let rows = 0
                    item.type.forEach(item2 => {
                        rows += item2.level.length
                    })
                    item.rowspan = rows
                    return item
                })

                let dataList = []

                data2.forEach((item, itemIndex) => {

                    item.type.forEach((typeItem, typeIndex) => {

                        typeItem.level.forEach((levelItem, levelIndex) => {
                            if (typeIndex===0 && levelIndex === 0) {
                                dataList.push({
                                    rowspan1: item.rowspan,
                                    orgName:item.orgName,
                                    rowspan2: typeItem.level.length,
                                    "typeName": typeItem.typeName,
                                    ...levelItem
                                    }
                                )
                            }

                            else if (levelIndex === 0) {
                                dataList.push({
                                        rowspan2: typeItem.level.length,
                                        "typeName": typeItem.typeName,
                                        ...levelItem
                                    }
                                )
                            } else {
                                dataList.push(levelItem)
                            }
                        })
                    })
                })

      this.mydata = dataList
    }
  }
}
</script>
<style scoped>
  .container{
    display: flex;
    align-items: center;
  }
  .content{
    flex:1;
    text-align: center;
  }
  .content h1,.content h3{
    color:#999999;
  }
</style>
